{% load static %}
{% load cache %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="description" content="本网站(0318-SPACE)为博主的个人网站,用于博主的日常学习和分享,欢迎大家的访问!"/>
    <meta name="keywords" content="LLL 吕亮亮的博客  吕亮亮  www.lll.plus {% block keywords %}{% endblock %}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{% static 'imgs/favorite.ico' %}" type="image/x-icon"/>
    <title>快乐星球</title>

</head>
<body id="container" class="container-fluid">
<link rel="stylesheet" href="{% static 'css/playingplanet.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>
<script src="{% static 'js/tools.js' %}"></script>
{% include 'addDesc_popMsg.html' %}
{% comment %}头部-用于放用户的介绍,以及发布动态的按钮{% endcomment %}
{% if userId %}
    <div id="playing-head" class="container-fluid my-hidden">
        <img src="{% url 'app:index' %}{{ userAvatar }}" alt="博主的头像">
        <span><a href="#" class="descUser" id="{{ userId }}">{{ username }}</a></span>
        <a class="nav-bu" href="#" id="linkToWrite">发布动态</a>
        <a class="nav-bu" href="{% url 'app:index' %}">回到首页</a>

    </div>
{% else %}
    <div id="playing-head" class="container-fluid my-hidden">
        <a class="nav-bu" href="#" id="linkToWrite">发布动态</a>
        <a class="nav-bu" href="{% url 'app:index' %}">回到首页</a>
    </div>
{% endif %}
{% comment %}头部end{% endcomment %}



<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script>
    let linkToWrite = document.getElementById('linkToWrite');
    let str = `
<form style="width: 100%;height: 100%;" action="{% url 'playingPlanet:recFromPlaying' %}" method="post" enctype="multipart/form-data">
<div id="msg-top">分享今日份快乐<span class="iconfont close" id="closeMsg">&#xe61a;</span></div><div id="msg-bottom">
<textarea required placeholder="记录一下今日份的快乐吧~" name="content" maxlength="1000"></textarea><div id="pvTag">图片/视频</div><div id="pvBox"><ul>
<li><span class="iconfont">&#xe63c;</span> <input class="imgInput" type="file" accept=".jpg,.png,.gif" name="img1"> </li>
<li><span class="iconfont">&#xe63c;</span> <input class="imgInput" type="file" accept=".jpg,.png,.gif" name="img2"> </li>
<li><span class="iconfont">&#xe63c;</span> <input class="imgInput" type="file" accept=".jpg,.png,.gif" name="img3"> </li>
<li><span class="iconfont">&#xe63c;</span> <input class="imgInput" type="file" accept=".jpg,.png,.gif" name="img4"> </li>
<li><span class="iconfont">&#xe63c;</span> <input class="imgInput" type="file" accept=".jpg,.png,.gif" name="img5"> </li>
<li><span class="iconfont">&#xe63c;</span> <input class="imgInput" type="file" accept=".jpg,.png,.gif" name="img6"> </li>
<li><span class="iconfont">&#xe63c;</span> <input class="imgInput" type="file" accept=".jpg,.png,.gif" name="img7"> </li>
<li><span class="iconfont">&#xe63c;</span> <input class="imgInput" type="file" accept=".jpg,.png,.gif" name="img8"> </li>
<li><span class="iconfont">&#xe63c;</span> <input class="imgInput" type="file" accept=".jpg,.png,.gif" name="img9"> </li></ul></div>
<div id="vBox"><input id="videoInput" type="file" accept=".mp4" name="video"><span class="iconfont">&#xe618;</span>
<video src="#" controls id="videoPlayer"></video></div>
<input name="userId" value="{{ userId }}" style="display:none">
<button id="fabu">发&nbsp;&nbsp;布</button><div id="tips">
<p>tips:图片和视频只能上传一类文件,如果同时上传,只会显示图片!</p></div>
<div id="public"> <input type="checkbox" name="public" checked="checked" name="public">公开</div></div></form>`;

    linkToWrite.onclick = function () {
        if ('{{ LoginStatus }}' === 'None') {
            popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">请先登录~<a style="color:green!important;" href="{% url 'app:login' %}">登录</a> </div>`);

        } else {
            popMsg(str);

            //可以选择多个文件加载在页面
            function read(which) {
                for (var i = 0; i < which.files.length; i++) {
                    let reader = new FileReader();
                    var file1 = which.files[i];
                    reader.readAsDataURL(file1);
                    reader.onload = function (result) {
                        //reader对象的result属性存储流读取的数据
                        imgData = reader.result;
                        if (which.className.toLowerCase() === 'imginput') {
                            var showAvatar = document.createElement('img'); //用于显示图片的img元素
                            showAvatar.src = `${imgData}`;
                            which.parentNode.appendChild(showAvatar);
                        } else {
                            let videoPlayer = document.getElementById('videoPlayer');
                            videoPlayer.src = `${imgData}`;
                            videoPlayer.style.display = 'block';
                            which.nextSibling.style.backgroundColor = '#00bcd4';
                        }

                    }
                }
            }

            let imgInput = document.getElementsByClassName('imgInput');
            let videoInput = document.getElementById('videoInput');
            for (let ii = 0; ii < imgInput.length; ii++) {
                imgInput[ii].onchange = function () {
                    read(this);
                }
            }
            videoInput.onchange = function () {
                read(this);
            }

            let pvTag = document.getElementById('pvTag');
            {% comment %}图片和视频切换{% endcomment %}
            let pvBox = document.getElementById('pvBox');
            let vBox = document.getElementById('vBox');
            let N = 0;
            pvTag.onclick = function () {
                if (N % 2 === 0) {
                    pvBox.style.display = 'none';
                    vBox.style.display = 'block';
                } else {
                    pvBox.style.display = 'block';
                    vBox.style.display = 'none';
                }
                N += 1;

            }
        }


    }


</script>
{% cache 60 'content-play' %}
    {% comment %}内容部分{% endcomment %}
    <div id="playing-content" class="container-fluid">
        {% for momentObj in momentList %}
            <div class="each-content container-fluid" id="{{ momentObj.id }}">
                <div class="each-content-top">
                    <img src="{% url 'app:index' %}{{ momentObj.userAvatar }}" alt="博主的头像">
                    <span class="name"><a href="#" class="descUser"
                                          id="{{ momentObj.userId }}">{{ momentObj.username }}</a></span>
                    <span class="time">时间:{{ momentObj.date }}</span>
                    {% if userId == momentObj.userId %}
                        <span class="delete">删除</span>
                        {% else %}
                        <span></span>
                    {% endif %}


                </div>
                <div class="each-content-bottom row">
                    <p class="content">{{ momentObj.content }}</p>

                    <ul class="ulForPicture col-9 row container-fluid">
                        {% for imgObj in momentObj.imgList %}
                            {% if imgObj %}
                                <li class="col-4"><img src="../media/{{ imgObj }}"></li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                    {% if momentObj.video %}
                        <video width="320" height="240" preload src="../media/{{ momentObj.video }}"
                               controls></video>
                    {% endif %}
                    <div class="pinlunFrame col-12">
                        {% for juderobj in momentObj.judgeList %}
                            <div class="eachpinlun">
                            <span class="judger"><a class="descUser" href="#"
                                                    id="{{ juderobj.juderId }}">{{ juderobj.juderName }}</a>:</span>
                                <span class="judgercontent">{{ juderobj.content }}</span>
                            </div>

                        {% endfor %}

                    </div>

                    <div class="container-fluid">
                        <span class="iconfont">&#xe62f;</span>
                        <input class="inputSpan" placeholder="写下你的神评吧!" maxlength="200">
                        <span class="pinlun">发&nbsp;&nbsp;表</span>
                        <span class="docall"><span
                                class="iconfont">&#xe697;</span><span>{{ momentObj.callNum }}</span></span>
                    </div>

                </div>
            </div>
        {% endfor %}
    </div>
    {% comment %}内容部分end{% endcomment %}
    <script>
        {% comment %}点赞功能的实现{% endcomment %}

        function docall(call, id) {
            $ajax('post',
                '{% url "playingPlanet:CallNum" %}',
                {
                    'userId': '{{userId}}',
                    'call': call,
                    'id': id
                },
                null,
                function (msg) {
                    popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                })
        }

        function addDoCall() {
            let docallList = document.getElementsByClassName('docall');
            for (var mm = 0; mm < docallList.length; mm++) {
                docallList[mm].index = mm;
                docallList[mm].N = 0;
                docallList[mm].onclick = function () {
                    let callNum = parseInt(this.lastChild.innerHTML);
                    let momentId = this.parentNode.parentNode.id;
                    if (this.N % 2 === 0) { {% comment %}点赞{% endcomment %}
                        ++callNum;
                        this.style.backgroundColor = 'deepskyblue';
                        docall(1, momentId);
                        this.onmouseleave = function () {
                            this.style.backgroundColor = 'deepskyblue';
                        }
                    } else {  {% comment %}取消点赞{% endcomment %}
                        --callNum;
                        docall(-1, momentId);
                        this.style.backgroundColor = 'transparent';
                        this.onmouseover = function () {
                            this.style.backgroundColor = 'deepskyblue';
                        }
                        this.onmouseleave = function () {
                            this.style.backgroundColor = 'transparent';
                        }
                    }
                    this.N += 1;
                    this.lastChild.innerHTML = callNum;
                }
            }
        }

        addDoCall();
        {% comment %}点赞功能的实现end{% endcomment %}
        {% comment %}删除动态{% endcomment %}

        function deleteMOMENT() {
            let deleteList = document.getElementsByClassName('delete');
            for (var kk = 0; kk < deleteList.length; kk++) {
                deleteList[kk].index = kk;
                deleteList[kk].onclick = function () {

                    if (confirm('是否确认删除此动态?')) {
                        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
                        {% comment %}网页上删除{% endcomment %}
                        $ajax('post', '{% url "playingPlanet:deletemoment" %}',
                            {
                                'id': this.parentNode.parentNode.id, {% comment %}动态的id{% endcomment %}
                                'userId': '{{ userId }}', {% comment %}该动态发布人的id{% endcomment %}
                            },
                            null,
                            function (msg) {
                                popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);

                            }
                        )

                    }
                }
            }
        }

        deleteMOMENT();
        {% comment %}删除动态end{% endcomment %}

        {% comment %}评论{% endcomment %}
        //登录之后才能评论
        function dopinlun() {
            let pinlunList = document.getElementsByClassName('pinlun');
            let pinlunContentList = document.getElementsByClassName('inputSpan');

            function pinlun(this_) {
                if ('{{ LoginStatus }}' === 'None') {
                    popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">请先登录~<a style="color:green!important;" href="{% url 'app:login' %}">登录</a> </div>`);
                } else {
                    let inputDiv = pinlunContentList[this_.index];
                    let content = pinlunContentList[this_.index].value;
                    let momentId = this_.parentNode.parentNode.parentNode.id;
                    let nowMomentDiv = this_.parentNode.parentNode;
                    if (content.length < 1) {

                    } else {
                        $ajax('post', '{% url "playingPlanet:pinlunmoment" %}',
                            {
                                'content': content,
                                'judgerId': '{{ userId }}',
                                'momentId': momentId,
                            },
                            function () {
                                let pinlunFrame = nowMomentDiv.getElementsByClassName('pinlunFrame')[0];
                                let newDiv = document.createElement('div');
                                let str = `
                            <span class="judger"><a class="descUser" href="#" id="{{ userId }}">{{ username }}</a>:</span>
                            <span class="judgercontent">${content}</span>`;
                                newDiv.className = 'eachpinlun';
                                newDiv.innerHTML = str;
                                //box1.parentNode.insertBefore(box2,box1)
                                pinlunFrame.insertBefore(newDiv, pinlunFrame.firstChild);
                                inputDiv.value = '';
                                pinlunFrame.style.border = '1px solid silver';
                                addDescTag();
                            },
                            function (msg) {
                                popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                            }
                        )
                    }
                }
            }

            for (var ll = 0; ll < pinlunContentList.length; ll++) {
                pinlunContentList[ll].index = ll;
                pinlunContentList[ll].onkeyup = function (e) {
                    keynum = window.event ? e.keyCode : e.which;
                    if (parseInt(keynum) === 13) {
                        pinlun(this);
                    }
                }
            }
            for (var jj = 0; jj < pinlunList.length; jj++) {
                pinlunList[jj].index = jj;
                pinlunList[jj].onclick = function () {
                    pinlun(this);

                }
            }
        }

        dopinlun();

        {% comment %}评论end{% endcomment %}
        {% comment %}没有评论的动态不需要显示评论的边框{% endcomment %}

        function deleteBorder() {
            let pinlunFrameList = document.getElementsByClassName('pinlunFrame');
            for (let ii = 0; ii < pinlunFrameList.length; ii++) {
                if (pinlunFrameList[ii].innerText.length === 0) {
                    pinlunFrameList[ii].style.border = 'none';

                }
            }
        }

        deleteBorder();
        {% comment %}滚轮滑到底部后加载新的内容{% endcomment %}

        function getScrollTop() {
            var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
            if (document.body) {
                bodyScrollTop = document.body.scrollTop;
            }
            if (document.documentElement) {
                documentScrollTop = document.documentElement.scrollTop;
            }
            scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
            return scrollTop;
        }

        //文档的总高度
        function getScrollHeight() {
            var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            if (document.body) {
                bodyScrollHeight = document.body.scrollHeight;
            }
            if (document.documentElement) {
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
        }

        function getWindowHeight() {
            var windowHeight = 0;
            if (document.compatMode === "CSS1Compat") {
                windowHeight = document.documentElement.clientHeight;
            } else {
                windowHeight = document.body.clientHeight;
            }
            return windowHeight;
        }


        var NNN = 1;
        {% comment %}用于记录请求服务器的次数{% endcomment %}
        var playingContent = document.getElementById('playing-content');

        window.onscroll = function () {
            if (getScrollTop() + getWindowHeight() >= getScrollHeight() - 50) {

                {% comment %}删除原有的Tip{% endcomment %}
                try {
                    addmomentTip = document.getElementById('addmomentTip');
                    playingContent.removeChild(addmomentTip);
                } catch (e) {
                }

                let newTip = document.createElement('div');
                newTip.innerHTML = '加载中...';

                newTip.id = 'addmomentTip';
                playingContent.appendChild(newTip);

                function appendContent(momentList) {
                    let str = ``;
                    for (var qq = 0; qq < momentList.length; qq++) {
                        {% comment %}删除按钮{% endcomment %}
                        let isMineMoment = '{{ userId }}' === momentList[qq]['userId'];
                        let deleteStr = ``;
                        if (isMineMoment) {
                            deleteStr = `<span class="delete">删除</span>`;
                        }
                        {% comment %}图片{% endcomment %}
                        let imgStr = ``;
                        let imgList = momentList[qq]['imgList'];
                        for (var imgindex = 0; imgindex < imgList.length; imgindex++) {
                            if (imgList[imgindex]) {
                                imgStr += `  <li class="col-4"><img src="{% url 'app:index' %}${imgList[imgindex]}"></li>`;

                            }
                        }

                        {% comment %}视频{% endcomment %}
                        let isVideo = momentList[qq]['video'];
                        let videoStr = ``;
                        if (isVideo) {
                            videoStr = `<video width="320" height="240" preload src="{% url 'app:index' %}${momentList[qq]['video']}"
                               controls></video>`;
                        }

                        {% comment %}评论{% endcomment %}
                        let judgeStr = ``;
                        let judgersList = momentList[qq]['judgeList'];
                        for (let vv = 0; vv < judgersList.length; vv++) {
                            judgeStr += `  <div class="eachpinlun">
                            <span class="judger"><a class="descUser" href="#"
                                                    id="${judgersList[vv]['juderId']}">${judgersList[vv]['juderName']}</a>:</span>
                                <span class="judgercontent">${judgersList[vv]['content']}</span>
                            </div>`;
                        }
                        str += `<div class="each-content container-fluid" id="${momentList[qq]['id']}">
                <div class="each-content-top">
                    <img src="{% url 'app:index' %}${momentList[qq]['userAvatar']}" alt="博主的头像">
                    <span class="name"><a href="#" class="descUser"
                                          id="${momentList[qq]['userId']}">${momentList[qq]['username']}</a></span>
                    <span class="time">时间:${momentList[qq]['date']}</span>
             ${deleteStr}
                </div>
                <div class="each-content-bottom row">
                    <p class="content">${momentList[qq]['content']}</p>
                    <ul class="ulForPicture col-9 row container-fluid">
                    ${imgStr}
                    </ul>${videoStr}<div class="pinlunFrame col-12">${judgeStr}</div>
                    <div class="container-fluid">
                    <span class="iconfont">&#xe62f;</span>
                    <input class="inputSpan" placeholder="写下你的神评吧!" maxlength="200">
                    <span class="pinlun">发&nbsp;&nbsp;表</span>
                    <span class="docall"><span class="iconfont">&#xe697;</span><span>${momentList[qq]['callNum']}</span></span>
                </div>
                </div>
            </div>`;
                    }
                    try {
                        let addmomentTip = document.getElementById('addmomentTip');
                        playingContent.removeChild(addmomentTip);
                    } catch (e) {
                    }
                    playingContent.innerHTML += str;
                    deleteBorder();
                    {% comment %}删除边框{% endcomment %}
                    addDescTag();
                    {% comment %}用户介绍{% endcomment %}
                    deleteMOMENT();
                    {% comment %}删除动态{% endcomment %}
                    addDoCall();
                    {% comment %}点赞{% endcomment %}
                    dopinlun();
                    {% comment %}评论{% endcomment %}

                }

                {% comment %}请求服务器{% endcomment %}
                $ajax('post', '{% url "playingPlanet:addmoment" %}',
                    {
                        'num': NNN,
                        'userId': '{{ userId }}'
                    },
                    function (msg) {

                        let momentList = JSON.parse(msg)['momentList'];
                        let addmomentTip = document.getElementById('addmomentTip');
                        if (momentList.length < 5) {
                            appendContent(momentList);
                            window.onscroll = function () {
                            }
                            newTip.innerHTML = '已经到底了...';
                            newTip.id = 'addmomentTip';
                            playingContent.appendChild(newTip);
                            {% comment %}如果返回的数据为空,说明所有数据都已经加载了,所以删除该函数,避免不必要的请求{% endcomment %}
                        } else {
                            appendContent(momentList);
                        }
                    }
                    , function (msg) {
                        popMsg(`<div id="msg-top">提示
            <span class="iconfont close" id="closeMsg">&#xe61a;</span>
        </div><div id="msg-bottom">${JSON.parse(msg)['msg']}</div>`);
                    }
                )
                NNN += 1;
            }
        };
        {% comment %}滚轮滑到底部后加载新的内容end{% endcomment %}
    </script>
{% endcache %}

</body>
</html>


